<template>
    <div class="box">

      <el-card style="max-width: 480px">
        <template #header>
          <div class="card-header"><span>username</span><el-input v-model="RuleForm.name" /></div>
          <span>passward</span><el-input v-model="RuleForm.password" />
        </template>
       
        <span>role</span><el-input v-model="RuleForm.role" />
        <span>checkedKeys</span><el-input v-model="RuleForm.checkedKeys" />
          
          
     
       
        <template #footer>
          <el-button type="primary" @click="onSubmit">zhuce</el-button>
          <el-button>Cancel</el-button>
        </template>
      </el-card>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref } from 'vue'
  import { userZhuce } from '../Api/user'
import router from '@/router'
  
  interface RuleForm {
    name: string
    password: string
    role: string
    checkedKeys: string
  }
  const RuleForm = ref<RuleForm>({
    name: '',
    password: '',
    role: '',
    checkedKeys: ''
  })
  function onSubmit() {
    userZhuce(RuleForm.value.name, RuleForm.value.password,RuleForm.value.role,RuleForm.value.checkedKeys).then((r) => {
      console.log(r.data)
      if (r.data.code == 200) {
       router.push('/login')
      } else {
        alert('注册失败')
    }})
  }

  </script>
  <style scoped lang="scss">
  .box {
    background-image: url('https://tse1-mm.cn.bing.net/th/id/OIP-C.Bv8Vl5plkBVWhSF0nWquLwHaNK?w=187&h=333&c=7&r=0&o=5&dpr=1.1&pid=1.7');
    height: 100%;
    display: flex;
    .el-card {
      margin-left: calc(50% - 150px);
      height: 400px;
      width: 300px;
    }
  }
  </style>
  